<!--
 * @Author: 九璃怀特 1599130621@qq.com
 * @Date: 2023-12-22 14:06:02
 * @LastEditors: 九璃怀特 1599130621@qq.com
 * @LastEditTime: 2023-12-29 11:08:51
 * @FilePath: \zxi-surface-manual\src\components\BaseFrame\topFrame.vue
 * @Description: 
 -->
<script setup lang="ts">
import { computed, inject, ref } from 'vue';
import { PmFrameKey } from '.';
import { ElMessage, ElMessageBox } from 'element-plus';


const root = inject(PmFrameKey)!

function openMenu(){
  root.showDrawer.value = !root.showDrawer.value
}

const title = computed(()=>{
  // return root.video.value.name || 'PM360 Doc'
  return 'PM360 用户手册'
})

const fullScreenActive = ref(true)

window.electronAPI?.getFullScreen().then(v=>fullScreenActive.value = v)

function setMinMaxClose (status: 'min' | 'max' | 'close') {
  if (status === 'close') {
    ElMessageBox.confirm(
      '确认退出当前程序?',
      '警告',
    {
      confirmButtonText: '退出',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
      window.electronAPI.controlApp(status)
  }).catch(() => {
      ElMessage({
        type: 'info',
        message: '取消退出'
      })
    })
  } else if(status==='max') {
    window.electronAPI.setFullScreen().then(v => {
      fullScreenActive.value = v
    })
  }else{
    window.electronAPI.controlApp(status)
  }
}

const showConreol = computed(()=>{
  return 'electronAPI' in window
})

</script>

<template>
  <div class="pm-top-frame">
    <div class="title-container">
      <PmButton @click="openMenu" :iconfont="'icon-gongneng'" fullContent class="name-container">
        <PmText  class="title">{{title}}</PmText>
      </PmButton>
    </div>
    <div class="control-container">
      <div class="control" v-if="showConreol">
        <PmButton :iconSize="2" iconfont="icon-zuixiaohua" @click="setMinMaxClose('min')"></PmButton>
        <PmButton :iconSize="2" iconfont="icon-guanbi1" @click="setMinMaxClose('close')"></PmButton>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.pm-top-frame {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0.5rem;
  .title-container {
    display: flex;
    height: 100%;
    .name-container {
      min-width: 22rem;
      .title {
        font-size: 3rem;
        font-weight: bold;
      }
    }
  }
  .control-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .control {
      user-select: all;
      display: flex;
      justify-content: right;
      gap: .5rem;
      align-items: center;
      :deep(button) {
        padding: 1.5rem !important;
        background-color: transparent !important;
      }
  
      .iconfont {
        font-size: 1.75rem;
      }
    }
  }
}
</style>
